Eloquent JavaScript: A Modern Introduction to Programming: Beyond Basic Drawing: Composite Operations and Spray Tools

This module transitions from static paths to dynamic, event-driven tools by manipulating the CanvasRenderingContext2D state. We focus on extending application capabilities through higher-order patterns and mathematical filtering.

1. Higher-Order Tool Patterns

Tools like tools.Line abstract mouse events using helpers like trackDrag. Conversely, tools.Spray implements interval-based repetition via setInterval, allowing continuous pixel placement while the mouse is held down.

2. Mathematical Constraints

A simple random offset creates a square distribution. To achieve a natural circular "brush" effect, we use the Pythagorean theorem to filter points: $x^2 + y^2 < r^2$. Alternatively, one could use polar coordinates with Math.sin and Math.cos for conversion.

3. Composite Operations & State

Beyond standard strokes, the globalCompositeOperation property defines how new pixels interact with existing ones. For example, setting it to 'destination-out' allows the tools.Erase function to turn pixels transparent rather than just painting them white. UI controls like controls.color and controls.brushSize provide real-time updates to fillStyle and lineWidth respectively.

The lineCap property (e.g., 'round' or 'square') controls the shape of the ends of stroked lines, critical for smooth drawing.

TERMINAL bash — 80x24

> Ready. Click "Run" to execute.

QUESTION 1

Which globalCompositeOperation value is best suited for a subtractive 'Eraser' tool?

source-over

destination-out

lighter

xor

QUESTION 2

Why does randomPointInRadius use a for(;;) loop with a conditional check?

To ensure the generated point lies within a circular radius rather than a square.

To prevent the browser from freezing during heavy drawing.

To calculate the color density of the spray.

To wait for the next mouse movement event.

QUESTION 3

How should a color picker control update the drawing context?

Only update the strokeStyle.

Update both fillStyle and strokeStyle to the input value.

Clear the canvas and redraw everything with the new color.

Change the globalCompositeOperation to 'color'.

QUESTION 4

Which JavaScript function is used by the Spray tool to simulate continuous application?

requestAnimationFrame

setTimeout

setInterval

while(true)

QUESTION 5

What is the role of lineCap in tool creation?

It determines the maximum width of a line.

It controls the shape of the ends of stroked lines.

It limits the canvas to a specific drawing area.

It toggles between the Spray and Line tools.

Interactive Tool Design

Canvas Logic and Interaction Challenges

You are tasked with expanding the Paint application. You need to implement a Rectangle tool with a preview function and a Color Picker that selects pixels directly from the canvas.

1. How would you implement a 'Rectangle' tool that shows a preview while dragging without permanently altering the canvas until the mouse is released?

Solution:
To show a preview, you must store the current canvas state (using getImageData or a secondary hidden canvas) and redraw it on every mouse move before drawing the 'preview' rectangle. Alternatively, draw the preview on a separate transparent overlay canvas that is cleared and synchronized with the main canvas upon mouseup.

2. Build the logic for a Color Picker tool that selects the color under the mouse pointer.

Solution:
The tool should use relativePos to find the mouse coordinates, then call cx.getImageData(pos.x, pos.y, 1, 1).data. This returns a 4-element array [R, G, B, A]. Convert these to an rgb() string and update cx.fillStyle and cx.strokeStyle. Note: This is subject to the same cross-origin 'tainting' restrictions as toDataURL.

3. Why might using a random angle and distance (Polar coordinates) for the Spray tool result in non-uniform density?

Solution:
If you pick a random angle and a random distance (0 to R), dots will cluster at the center because the area of a circle grows with the square of the radius. To fix this, you would need to take the square root of the random distance variable to maintain uniform density.